<template>
  <div>
    <div id="myMap" class="map-box"></div>
</div>
</template>

<script>
import { akProxy } from '@/utils/ak';
import Provider from '@/utils/chinatmsproviders'; // 
import L from 'leaflet';
export default {
  name: 'PreLeaflet',
  data() {
    return {
      maskArea: null, // 保存图形
    }
  },
  mounted() {
    Provider(L)
    this.getMap()
  },
  methods: {
    getMap() {
      let myCenter = new L.LatLng(45.763968, 126.591629) // 设置地图中心
      let map = L.map('myMap', {
        center: myCenter,
        zoom: 18,
        zoomControl: false,
        attributionControl: false
      })
      this.map = map
      L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', { maxZoom: 18, minZoom: 5, key: akProxy.ak }).addTo(map);
      L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', { maxZoom: 18, minZoom: 5, key: akProxy.ak }).addTo(map);
    },
  },
}
</script>

<style scoped>
#myMap {
  height: 70vh;
}
</style>
